<template>
  <div class="app-container home">
    <!-- <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-warning" style="font-size: 14px">
          领取阿里云通用云产品1888优惠券
          <br />
          <el-link
            href="https://www.aliyun.com/minisite/goods?userCode=brki8iof"
            type="primary"
            target="_blank"
            >https://www.aliyun.com/minisite/goods?userCode=brki8iof</el-link
          >
          <br />
          领取腾讯云通用云产品2860优惠券
          <br />
          <el-link
            href="https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console"
            type="primary"
            target="_blank"
            >https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console</el-link
          >
          <br />
          阿里云服务器折扣区
          <el-link href="http://aly.ruoyi.vip" type="primary" target="_blank"
            >>☛☛点我进入☚☚</el-link
          >
          &nbsp;&nbsp;&nbsp; 腾讯云服务器秒杀区
          <el-link href="http://txy.ruoyi.vip" type="primary" target="_blank"
            >>☛☛点我进入☚☚</el-link
          ><br />
          <h4 class="text-danger">
            云产品通用红包，可叠加官网常规优惠使用。(仅限新用户)
          </h4>
        </blockquote>

        <hr />
      </el-col>
    </el-row> -->

    <el-row :gutter="20">
      <el-col  :xs="24" :sm="6" :lg="6">
        <el-card class="els-card" shadow="hover">
          <h3>本月收入</h3>
          <div class="titlebox">
            <span style="font-size:28px">{{pageInfo.monthOrderMoney}}</span>
            <span style="font-size:18px">{{pageInfo.monthOrderMoneyGrowth}}%</span>
          </div>
        </el-card>
      </el-col>
      <el-col  :xs="24" :sm="6" :lg="6">
        <el-card class="els-card" shadow="hover" @click="openPath('/operate/order')">
          <h3 class="clearfix">本月成交订单数量</h3>
          <div class="titlebox">
            <span style="font-size:28px">{{pageInfo.monthOrderCount}}</span>
            <span style="font-size:18px">{{pageInfo.monthOrderCountGrowth}}</span>
          </div>
        </el-card>
      </el-col>
      <el-col  :xs="24" :sm="6" :lg="6">
        <el-card class="els-card" shadow="hover" @click="openPath('/userInfo/group')">
          <h3 class="clearfix">会员总数</h3>
          <div class="titlebox">
            <span style="font-size:28px">{{pageInfo.user}}</span>
          </div>
        </el-card>
      </el-col>
      <el-col  :xs="24" :sm="6" :lg="6">
        <el-card class="els-card" shadow="hover" @click="openPath('/product/goods')">
          <h3 class="clearfix">总资产</h3>
          <div class="titlebox">
            <span style="font-size:28px">{{pageInfo.goodsCount}}</span>
            <span style="font-size:18px">{{pageInfo.goodsPrice}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- <el-calendar>
      <template 
        slot="dateCell"
        slot-scope="date, data">
        <p class="is-selected">
          {{ data.day.split('-').slice(1).join('-') }} {{'1'}}
        </p>
      </template>
    </el-calendar> -->

    <!-- 图表区域1 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="10" style="margin-top: 20px;">
        <el-card class="update-log" shadow="hover">
          <template v-slot:header>
            <h3 class="clearfix">用户年龄分布</h3>
          </template>
          <div id="eagChart" style="height:300px"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="7" style="margin-top: 20px;">
        <el-card class="update-log" shadow="hover">
          <template v-slot:header>
            <h3 class="clearfix">用户数量</h3>
          </template>
          <div id="userChart" style="height:300px"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="7" style="margin-top: 20px;">
        <el-card class="update-log" shadow="hover">
          <template v-slot:header>
            <h3 class="clearfix">员工用车情况</h3>
          </template>
          <div v-infinite-scroll="load" style="overflow:auto;height:300px">
            <el-card v-for="item,index in pageInfo.staff" :key="index" shadow="never" style="margin-bottom: 10px;">
              <div class="ulli">
                <div style="width:100px">{{item.name}}</div>
                <el-progress style="flex:1" :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
              </div>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域2 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" style="margin-top: 20px;">
        <el-card class="update-log" shadow="hover">
          <template v-slot:header>
            <h3 class="clearfix">本周收入</h3>
          </template>
          <div id="moneyChart" style="height:440px"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" style="margin-top: 20px;">
        <el-card class="update-log" shadow="hover">
          <template v-slot:header>
            <div class="ulli">
              <h3 class="clearfix">门店数据</h3>
              <div>
                <el-date-picker
                  v-model="timeValue"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </div>
          </template>
          <div style="height:440px">
            <el-table :data="pageInfo.pickPoint" style="width: 100%">
              <el-table-column prop="name" label="站点"></el-table-column>
              <el-table-column prop="goodsCount" label="商品"></el-table-column>
              <el-table-column prop="goodsPrice" label="资产"></el-table-column>
              <el-table-column prop="draw" label="收入"></el-table-column>
              <el-table-column prop="expend" label="支出"></el-table-column>
              <el-table-column prop="drawRate" label="收益率"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getpageInfo } from "@/api/index";
import * as echarts from "echarts";
export default {
  name: "index",
  components: {},
  data() {
    return{
      timeValue: '',
      pageInfo: {},
    }
  },
  // mounted(){
  //   this.initData()
  // },
  created(){
    this.$nextTick(() => {
      this.getInfo()
    })
  },

  methods: {
    // 获取首页内容
    getInfo(){
      getpageInfo().then(res => {
        const eagChart = echarts.init(document.getElementById('eagChart'))
        const userChart = echarts.init(document.getElementById('userChart'))
        const moneyChart = echarts.init(document.getElementById('moneyChart'))
        eagChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
          },
          series: [
            {
              name: '用户年龄分布', // formatter 中的a
              type: 'pie',
              radius: '50%',
              data: res.agePie,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
        userChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
          },
          series: [
            {
              name: '门店数据',
              type: 'pie',
              radius: '50%',
              data: res.userPie,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
        moneyChart.setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: res.week,
              type: 'bar',
              label: {
                show: true,
                position: 'inside'
              },
            }
          ]
        })
        window.onresize = eagChart.resize  //自适应浏览器窗口的大小
        window.onresize = userChart.resize  //自适应浏览器窗口的大小
        window.onresize = moneyChart.resize  //自适应浏览器窗口的大小
        this.pageInfo = res
      })
    },

    // 
    load(){},

    // 打开页面
    openPath(path){
      this.$router.push({ path })
    },

  }
};
// const version = ref('3.8.5')

// function goTarget(url) {
//   window.open(url, '__blank')
// }
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.ulli{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.titlebox{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.els-card {
  transition: all .3s;
}
.els-card:hover{
  margin-top: -5px;
}

</style>

